<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>



		<text class="page-title">修改用户昵称</text>

		<view class="main-content">

			<view class="nickname-form">
				<view class="form-item">
					<text class="form-label">昵称:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" placeholder="请填写昵称" v-model="nickname"/>
						<text class="input-hint">用于留言签名</text>
					</view>
				</view>
				<button class="confirm-button" @click="submit">确定修改</button>
				<text class="cancel-link" @click="handleCancel">不修改(返回)</text>
			</view>

		</view>



	</view>
</template>

<script setup>
	import {
		onMounted, ref
	} from 'vue';
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'
	import { userUpDate } from '@/api/user'
	onMounted(() => {

	});
	
	const nickname = ref('')
	// 确认修改
	const submit = () => {
		if(nickname.value == ''){
			uni.showToast({
				title: '请填写昵称',
				icon: 'none',
				duration: 1000
			})
			return false
		}
		
		let obj = {
			nickname: nickname.value
		}
		userUpDate(obj).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	}

	const handleCancel = () => {
		console.log('Cancel Modify clicked');
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content card */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center children horizontally */
	}

	/* Nickname Form Styles - Reusing input styles from register page */
	.nickname-form {
		width: 100%;
		/* Take full width within the card */
		/* No bottom margin needed, buttons/links will have spacing */
	}

	.form-item {
		margin-bottom: 30rpx;
		position: relative;
		/* Needed for absolute positioning of hints */
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		padding: 0 20rpx;
		/* Add padding inside the input container */
		height: 80rpx;
		/* Fixed height for inputs */
	}

	.form-input {
		flex: 1;
		/* Allow input to take available space */
		height: 100%;
		/* Fill parent height */
		font-size: 28rpx;
		color: #333;
		/* Remove default input padding/appearance if any */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0;
		/* Ensure no extra padding */
		background-color: transparent;
		/* Ensure background is transparent for wrapper border */
	}

	/* Placeholder style */
	.form-input::placeholder {
		color: #ccc;
	}

	/* Input Hint Styles - Positioned relative to the input-wrapper */
	.input-hint {
		position: absolute;
		right: 20rpx;
		/* Adjust position */
		font-size: 24rpx;
		color: #999;
		pointer-events: none;
		/* Make text non-interactive */
	}

	/* Action Button Styles */
	.confirm-button {
		/* Orange button style */
		width: 100%;
		/* Take full width */
		height: 90rpx;
		/* Button height */
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #ff9800;
		/* Orange color */
		border: none;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 10rpx;
		/* Space above button */
		margin-bottom: 30rpx;
		/* Space below button */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-link {
		display: block;
		/* Make it a block element for margin */
		text-align: center;
		font-size: 28rpx;
		color: #999;
		/* Gray color */
		text-decoration: none;
		/* Remove underline if needed */
		margin-top: 10rpx;
		/* Space above link */
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with card */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>